﻿<!DOCTYPE html>
<!--[if lt IE 7]>
<html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
<!--[if IE 7]>
<html class="no-js lt-ie9 lt-ie8"> <![endif]-->
<!--[if IE 8]>
<html class="no-js lt-ie9"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" xmlns:th="http://www.thymeleaf.org">
<!--<![endif]-->
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>智能养老云平台-重置密码</title>
    <link rel="shortcut icon" type="image/x-icon" th:href="@{/static/favicon.ico}">
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <link th:href="@{/static/css/regist.css}" rel="stylesheet">
    <link rel="stylesheet" th:href="@{/static/plugins/layui/css/layui.css}">
    <style>
        .submit {
            width: 200px !important;
        }
        .must:after{
            content: "*";
            color: red;
        }
        .layui-form-item {
            margin-bottom: 30px !important;
        }
    </style>
</head>
<body>
<!--[if lt IE 7]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
    your browser</a> to improve your experience.</p>
<![endif]-->
<div class="wrap">
    <nav class="site-navbar navbar navbar-default navbar-fixed-top navbar-inverse " role="navigation"
         style="background: #4e97d9;line-height:60px;padding-left:30px;color:#fff;">
        <div class="navbar-header" style="font-size:20px">智能养老云平台</div>
    </nav>
    <div class="registMain">
        <!-- 忘记密码-->
        <div class="form-box">
            <p>
                <a class="title">养老机构修改密码</a>
                <span class="fr">已有账号，<a class="acolor" th:href="@{/login}">去登录</a></span>
            </p>
            <form class="layui-form" lay-filter="myform"  id="changePasswordFrom">
                <div class="layui-form-item">
                    <label class="layui-form-label must">机构名称</label>
                    <div class="layui-input-block">
                        <input type="text" name="orgName" id="organizationIsNull" required lay-verify="required"
                               placeholder="请输入所在的机构名称(与许可证名称一致)" autocomplete="off" class="layui-input" maxlength="50">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label must">手机号码</label>
                    <div class="layui-input-inline">
                        <input type="text" name="phone" id="phone" required maxlength="11" lay-verify="required|phone"
                               placeholder="请输入手机号码" autocomplete="off" class="layui-input">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label must">短信验证码</label>
                    <div class="layui-input-inline">
                        <input type="number" name="smsCode" id="smsCode" required maxlength="6" lay-verify="required"
                               placeholder="请输入短信验证码" autocomplete="off" class="layui-input">
                    </div>
                    <div class="layui-form-mid layui-word-aux" style="padding-top: 0!important;">
                        <button type="button" id="getMsgCode" class="layui-btn layui-btn-normal">获取短信验证码<span></span>
                        </button>
                    </div>
                </div>
                <div class="layui-form-item">
                    <div class="layui-input-block">
                        <button class="layui-btn layui-btn-normal"  id="next" type="button">下一步</button>
                    </div>
                </div>
            </form>
        </div>
    </div><!-- //main -->
    <div class="foot">
        <div class="copyRight color666"> &copy; 2018 智能养老云平台</div>
    </div><!-- //foot -->

</div><!-- //wrap -->
<script th:src="@{/static/plugins/jquery.js}"></script>
<script th:src="@{/static/plugins/validate/jquery.validate.min.js}"></script>
<script th:src="@{/static/plugins/layui/layui.js}"></script>
<script>
    layui.use(["form", "layer"], function () {
        var $ = layui.$,
            form = layui.form,
            layer = layui.layer;

        //获取短信验证码
        $("#getMsgCode").on('click', sendMsg);

        function sendMsg() {
            var $btn = $(this);
            $btn.off('click');
            var phone = $("#phone").val();
            var orgName = $("#organizationIsNull").val();
            if (!phone || phone.length != 11) {
                layer.msg('请输入正确手机号码', {
                    icon: 5
                });
                $btn.on('click', sendMsg);
            } else {
                $.ajax({
                    url: "/changePassword/sendMsg",
                    data: {phone: phone, orgName: orgName},
                    type: "post",
                    dataType: "json",
                    success: function (rs) {
                        if (rs.code != 200) {
                            layer.msg(rs.message, {icon: 2});
                            $btn.on('click', sendMsg);
                        } else {
                            //短信发送成功
                            $btn.addClass("layui-disabled");
                            var s = 59;
                            var timer = window.setInterval(function () {
                                $btn.find("span").text("(" + s-- + ")");
                                if (s <= 1) {
                                    window.clearInterval(timer);
                                    $btn.removeClass("layui-disabled");
                                    $btn.on('click', sendMsg);
                                    $btn.find("span").text("");
                                }
                            }, 1000);
                        }
                    }
                });
            }

        }

        //输入机构代码后去后台验证是否已经存在该企业
        $("#organizationIsNull").on("change", function () {
            var orgName = $(this).val();
            $.ajax({
                url: "/changePassword/organizationIsNull",
                data: {orgName: orgName},
                type: "get",
                dataType: "json",
                async: false,
                success: function (rs) {
                    if (rs.code === 404) {
                        layer.msg(rs.message, {
                            icon: 5
                        });
                    }
                }
            });
        });

        //异步验证验证码
        $("#next").on('click',  function () {
            $.ajax({
                type: "post",//方法类型
                dataType: "json",//预期服务器返回的数据类型
                url: "/changePassword/change" ,//url
                data: $('#changePasswordFrom').serialize(),
                success: function (result) {
                    console.log(result);//打印服务端返回的数据(调试用)
                    if (result.code === 0) {
                        layer.msg(result.message, {
                            icon: 5
                        });
                    };
                    if (result.code === 200) {
                        location.href="/changePassword/inputNewPasswordUI";
                    }
                },
                error : function() {
                    alert("异常！");
                }
            });
        });

    });
</script>
</body>
</html>
